<template>
  <div class="container" :style="style">
    <div :class="['title', isRight ? 'right' : 'left']">
      <span :class="isRight ? 'float-left' : 'float-right'">{{ title }}</span>
      <slot name="title"></slot>
    </div>
    <div class="content">
      <slot></slot>
    </div>
  </div>
</template>
<script setup>
import { defineProps } from 'vue'
defineProps({
  title: {
    type: String
  },
  style: {
    type: Object
  },
  isRight: {
    type: Boolean,
    default: false
  }
})
</script>
<style scoped lang="less">
.container {
  display: flex;
  flex-flow: column;
  width: 800px;
  height: 334px;
  margin-left: 70px;
  .title {
    position: relative;
    span {
      background: linear-gradient(
        180deg,
        #e5f2ff 1%,
        #ffffff 19%,
        #ffffff 51%,
        #8fa3bf 100%
      );
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      color: transparent;
      font-family: YouSheBiaoTiHei;
      font-weight: 800;
      font-size: 34px;
      line-height: 50px;
    }
  }
  .content {
    flex: 1;
    padding-top: 20px;
  }
  .title {
    width: 478px;
    height: 50px;
  }

  .left {
    margin-left: 300px;
    border: 3px solid transparent;
    border-bottom-right-radius: 50px;
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
    background-image: linear-gradient(
        90deg,
        rgba(22, 98, 215, 0) 17%,
        rgba(22, 98, 215, 1) 100%
      ),
      linear-gradient(90deg, rgba(66, 123, 209, 0) 17%, rgb(22, 170, 215) 100%);
  }
  .right {
    border: 3px solid transparent;
    border-bottom-left-radius: 50px;
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
    background-image: linear-gradient(
        90deg,
        rgba(22, 98, 215, 1) 0%,
        rgba(22, 98, 215, 0) 83%
      ),
      linear-gradient(270deg, rgba(66, 123, 209, 0) 17%, rgb(22, 170, 215) 100%);
  }

  .float-left {
    margin-left: 40px;
    float: left;
  }

  .float-right {
    float: right;
    margin-right: 40px;
  }
}
</style>
